<template>
  <div class="goods-image">
    <!-- 大图 -->
    <div  v-show="show" class="large" :style="[{backgroundImage:`url(${image[currentIndex]})`}, largePosition]"></div>
    <!-- 中图 -->
    <div class="middle" ref="target">
        <img :src="image[currentIndex]" alt="">
        <!-- 遮罩层 -->
        <div v-show="show" class="layer" :style="layerPosition"></div>
    </div>
    <!-- 小图 -->
    <ul class="small">
        <li v-for="(img, index) in image " :key="index" :class="{active: index === currentIndex}">
            <img @mouseenter="currentIndex = index" :src="img" alt="">
        </li>
    </ul>
  </div>
</template>

<script>
import {reactive, ref, watch} from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
    name: 'GoodsImage',
    props: {
        image: {
            type:Array,
            default: () => []
        }
    },
    setup () {
        // 默认显示第一张图片
        const currentIndex = ref(0)
        // 是否显示遮罩层
        const show = ref(false)
        // 遮罩层坐标
        const layerPosition = reactive({
            top: 0,
            left: 0
        })
        const position = reactive ({
                x: 0,
                y: 0
        })
        // 大图坐标
        const largePosition = reactive({
            backgroundPositionX: 0,
            backgroundPositionY: 0
        })
        //获取坐标
        const target = ref(null)
        const {elementX, elementY, isOutside} = useMouseInElement(target)
        
        //监听坐标的变化
        watch([elementX, elementY, isOutside], () => {

            if(elementX.value < 100)  position.x = 0
            else if (elementX.value > 300) position.x = 200
            else position.x = elementX.value - 100

            if(elementY.value < 100)  position.y = 0
            else if (elementY.value > 300) position.y = 200
            else position.y = elementY.value - 100

            // 赋值
            layerPosition.top = position.y + 'px'
            layerPosition.left = position.x + 'px'

            largePosition.backgroundPositionX = - position.x * 2 + 'px'
            largePosition.backgroundPositionY = - position.y * 2 + 'px'

            show.value = !isOutside.value



        })
        return {currentIndex, show, layerPosition, target, position, largePosition}
    }
    

}
</script>

<style lang="less" scoped>
.goods-image {
    width: 480px;
    height: 400px;
    // 弹性布局
    display: flex;
    // 相对定位
    position: relative;
    z-index: 500;
    // 大图样式
    .large {
        position: absolute;
        top: 0;
        left: 412px;
        width: 400px;
        height: 400px;
        // 阴影效果
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background-repeat: no-repeat;
        background-size: 800px 800px;
        background-color: #f8f8f8;

    }
    // 主图样式
    .middle {
        width: 400px;
        height: 400px;
        background: #f5f5f5;
        cursor: move;
        .layer {
            position:absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, .2);
        }
    }
    // 小图样式
    .small {
        width: 80px;
        li {
            width: 68px;
            height: 68px;
            margin-left: 12px;
            margin-bottom: 15px;
            // 光标移入变成小手
            cursor: pointer;
            // 鼠标悬浮在li上时显示边框
            &:hover,&.active {
                border: 2px solid @xtxColor;
            }
        }

    }
}

</style>